<template>
<div >这是富文本框

  <div id="e">
   
  </div>
  <button @click="submit" >提交</button>
  <button @click="read">写入</button>
</div>
</template>

<script>
import E from "wangeditor"
import hljs from 'highlight.js'

import IndexService from '@/service/index'
const indexService = new IndexService();
export default {
 
    mounted(){
      this.initE()
    },
  data(){
    return{
      text:'',
      editor :new E('#e')
    }
  },
  methods:{
   submit(){
     console.log(this.editor.txt.html());
   },
   read(){
     this.editor.txt.html('<h1><strong>封装工具</strong></h1><h2><a></a></h2><h2><a></a>childNodes封装</h2><p><a></a><em>封装理由：</em></p><p><a></a>&nbsp; 因为childNodes获取时会把子元素获取到，也就是会把文本节点、注释节点等获取到不便使用，所以封装。</p><p><img src=""><span class="hljs-keyword" style="background-color: rgb(241, 241, 241);">function</span><span style="background-color: rgb(241, 241, 241);"> </span><span class="hljs-title" style="background-color: rgb(241, 241, 241);">test</span><span class="hljs-params" style="background-color: rgb(241, 241, 241);">()</span><span class="hljs-comment" style="background-color: rgb(241, 241, 241);">{</span><span style="color: rgb(209, 154, 102); background-color: rgb(241, 241, 241);"></span></p><pre type="JavaScript"><code><span class="hljs-function"><span class="hljs-comment">    let a =1;
    var a =2;
}</span>
<span class="hljs-title">test</span><span class="hljs-params">()</span>;</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span><span class="hljs-params">(a)</span><span class="hljs-comment">{
    let a = 10;
    console.log(a);
}</span>
<span class="hljs-title">test</span><span class="hljs-params">()</span>;</span>
</code></pre><p><br></p><p><img alt="" src="https://img-blog.csdnimg.cn/20201117100923162.png"><img src=""></p>')
   },
    initE() {
      
      //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
      this.editor.highlight = hljs;
      this.editor.config.languageType = [
    'JavaScript',
    'Bash',
    'C',
    'C#',
    'C++',
    'CSS',
    'Java',
    'JSON',
    'TypeScript',
    'Plain text',
    'Html',
    'XML',
    'SQL',
    'Go',
    'Kotlin',
    'Lua',
    'Markdown',
    'PHP',
    'Python',
    'Shell Session',
    'Ruby',
]

      this.editor.config.uploadImgServer = `http://localhost:3000/essay/upload_image`  // 你的服务器上传地址
      this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024 
      this.editor.config.uploadImgMaxLength = 50
      
      this.editor.config.withCredentials = true;

      
      
      this.editor.create()
    },
  }

}
</script>

<style>

</style>